<!-- 登录 -->
<template>
	<div class="loginPage">
		<div class="loginBox">
			<img src="../img/11.png" />
			<form class="form-group">
				<a-input style="width: 400px;margin-bottom: 30px;" placeholder="请输入账号" size="large" v-model="par.name">
					<a-icon slot="prefix" type="user" />
					<a-icon v-if="par.name" slot="suffix" type="close-circle" @click="emitName" />
				</a-input>
				<a-input style="width: 400px;margin-bottom: 30px;" type="password" placeholder="请输入密码" size="large" v-model="par.password" @keyup.enter="login">
					<a-icon slot="prefix" type="lock" />
					<a-icon v-if="par.password" slot="suffix" type="close-circle" @click="emitpass" />
				</a-input>
				<a-button type="primary" style="width: 400px;height: 40px;" @click="login">登录</a-button>
			</form>
		</div>
		<div class="footer">
			<span>copyrightⒸ 2018 康姆矿场</span>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				par: {
					name: '',
					password: ''
				}
			}
		},
		created() {

		},
		methods: {
			emitName() {
				this.par.name = ''
			},
			emitpass() {
				this.par.password = ''
			},
			//登陆
			login() {
				//判空
				if(!this.par.name || !this.par.password) {
					this.$message.warning('帐户名或密码不能为空!');
					return;
				}
				this.$ajax
					.post("/admin/login", this.par)
					.then(res => {
						if(res.data.code == 200) {
							sessionStorage.setItem("name", this.par.name);
							this.$message.success("登录成功!");
							this.$router.push({
								path: "/",
								name: "index"
							});
						} else {
							this.$message.error(res.data.message);
						}
					})
					.catch(err => {
						this.$message.error('服务器繁忙,请稍后重试!');
					});
			}
		},
	}
</script>

<style scoped lang="less">
	.loginPage {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: rgb(241, 242, 246);
		.loginBox {
			text-align: center;
			width: 400px;
			margin: 240px auto;
			img {
				width: 300px;
				margin-bottom: 50px;
			}
			.form-group {
				.check {
					overflow: hidden;
					margin-bottom: 30px;
					.checkLeft {
						float: left;
					}
					.checkRight {
						float: right;
						a {
							font-size: 14px;
						}
					}
				}
			}
		}
		.footer {
				width: 100%;
				position: relative;
				bottom: -140px;
				text-align: center;
				font-size: 14px;
				color: #ccc;
			}
	}
</style>
